<template>
    <div>
        <a-spin v-if="dataSourceFormat.length" :spinning="loading">
            <div v-for="(data, index) in dataSourceFormat" :key="index" class="table-card">
                <div class="header" :class="data.headerClass">
                    <div>{{ data.headerText }}</div>
                    <a-tag v-if="data.tagText" class="tag urged-tag" :class="data.tagClass">
                        {{ data.tagText }}
                    </a-tag>
                </div>
                <div class="content">
                    <div v-for="(colum, columIndex) in columns" :key="columIndex" class="item">
                        <slot
                            :name="colum.scopedSlots ? colum.scopedSlots.customRender : null"
                            :record="data"
                            class="item-content"
                        >
                            <div class="item-content">
                                <span>{{ colum.title }}</span>
                                <span>{{ data[colum.dataIndex] }}</span>
                            </div>
                        </slot>
                    </div>
                </div>
            </div>
        </a-spin>
        <div v-else-if="!loading" class="no-data">
            <span>{{ t('noData') }}</span>
        </div>
        <a-pagination
            v-if="dataSourceFormat.length"
            show-quick-jumper
            :default-current="pagination.current"
            :default-page-size="pagination.pageSize"
            :total="pagination.total"
            @change="changePage"
        />
    </div>
</template>
<script lang="ts">
    import { computed, reactive, ref, toRefs } from 'vue'
    import { useI18n } from 'vue-i18n'
    export default {
        name: 'CardTable',
        props: {
            type: {
                type: String,
                default: 'todo' // 对应页面tab 我的待办/我发起的/我处理的/抄送我的 其中todo会影响催办按钮的展示
            },
            columns: {
                type: Array,
                default: () => []
            },
            dataSource: {
                type: Array,
                default: () => []
            },
            loading: {
                type: Boolean,
                default: false
            },
            pagination: {
                type: Object,
                default: () => {}
            }
        },
        emits: ['change'],
        setup(props, { emit }) {
            const { dataSource, type } = toRefs(props)
            const { t } = useI18n()
            const space = ref('　') // 中文空格 占位符
            const successStatusArr = reactive(['END', 'APPROVED', 'REJECT', 'REVOKE']) // 需要判定为结束的状态
            const getTagText = dataSourceItem => {
                const successStatus = successStatusArr.includes(dataSourceItem.status)
                return successStatus ? t('end') : t('doing')
            }
            const getTagClass = dataSourceItem => {
                const successStatus = successStatusArr.includes(dataSourceItem.status)
                return successStatus ? 'success-tag' : 'urged-tag'
            }
            const getHeaderText = dataSourceItem => {
                const successStatus = successStatusArr.includes(dataSourceItem.status)
                return `${dataSourceItem.processInstanceName} ${
                    !successStatus ? `${space.value}${dataSourceItem.taskName}` || '' : ''
                }${space.value}${dataSourceItem.endTime || ''}`
            }
            const config = reactive({
                // 每一种类型对应,自定义的属性.
                todo: {
                    getTagText: dataSourceItem => (dataSourceItem.urged ? t('actions.urged') : ''),
                    getTagClass: dataSourceItem => (dataSourceItem.urged ? t('actions.urged') : 'urged-tag'),
                    getHeaderText: dataSourceItem =>
                        `${dataSourceItem.processInstanceName}${space.value}${dataSourceItem.taskName}`
                },
                my_create: {
                    getTagText,
                    getTagClass,
                    getHeaderText
                },
                done: {
                    getTagText,
                    getTagClass,
                    getHeaderText
                },
                cc: {
                    getTagText,
                    getTagClass,
                    getHeaderText
                }
            })
            const changePage = (pageNum: number) => {
                // 页面发生变化,向上传递数据,请求接口
                emit('change', pageNum)
            }
            /**
             * 对原数据进行改造, 提前提供tag说明,以及不同的class
             */
            const dataSourceFormat = computed(() => {
                return dataSource.value.map(
                    (dataSourceItem: {
                        status: string
                        headerClass: string
                        tagText: string
                        tagClass: string
                        headerText: string
                    }) => {
                        const successStatus = successStatusArr.includes(dataSourceItem.status) // 业务状态只考虑2种情况, 正在进行/已经结束, 用于样式判断
                        dataSourceItem.headerClass = successStatus ? 'success' : 'process'
                        dataSourceItem.tagText = config[type.value].getTagText(dataSourceItem)
                        dataSourceItem.tagClass = config[type.value].getTagClass(dataSourceItem)
                        dataSourceItem.headerText = config[type.value].getHeaderText(dataSourceItem)
                        return dataSourceItem
                    }
                )
            })
            return {
                t,
                dataSourceFormat,
                changePage
            }
        }
    }
</script>

<style lang="less" scoped>
    .table-card {
        background: #ffffff;
        box-shadow: 0 4px 20px 0 #e5e9f6;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        margin-bottom: 30px;
        white-space: nowrap;

        .header {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            font-size: 16px;
            line-height: 42px;
            padding: 0 18px;
            align-items: center;
        }

        .content {
            display: flex;
            flex: 1;
            flex-direction: row;
            text-align: center;
            align-items: center;

            .item {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                color: #42526e;
                height: 50px;
                border-left: 1px solid #e1e4ed;
                margin: 22px 0;
                padding: 0 10px;

                &-content {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;

                    span {
                        overflow: hidden;
                    }

                    & > span:first-child {
                        font-size: 14px;
                        line-height: 30px;
                        color: #788397;
                    }
                }

                &:first-child {
                    border-left: none;
                    flex: none;
                    width: 30%;
                }
            }
        }
    }

    :deep(.@{ant-prefix}-pagination) {
        float: right;
    }

    .process {
        color: #f4674b;
        border-left: 7px solid #f4674b;
        background-image: linear-gradient(90deg, rgba(244, 103, 75, 0.11) 0%, rgba(244, 103, 75, 0) 100%);
    }

    .success {
        color: #30bf78;
        border-left: 7px solid #30bf78;
        background-image: linear-gradient(90deg, rgba(48, 191, 120, 0.1) 0%, rgba(48, 191, 120, 0) 100%);
    }

    .normal {
        color: #3875ff;
        border-left: 7px solid #3875ff;
        background-image: linear-gradient(90deg, #f5f5f5 0%, rgba(225, 228, 237) 100%);
    }

    .tag {
        border: none;
        border-radius: 4px;
        color: #f4674b;
        height: 28px;
        line-height: 28px;
        padding: 0 14px;
    }

    .urged-tag {
        color: #f4674b;
        background: rgba(244, 103, 75, 0.2);
    }

    .success-tag {
        color: #30bf78;
        background: rgba(48, 191, 120, 0.1);
    }

    .no-data {
        height: 70vh;
        width: 100%;
        background: #fff;
        box-shadow: 0 4px 20px 0 #e5e9f6;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .svg-icon {
            width: 300px;
            height: 200px;
            transform: translateY(-50px);
        }

        span {
            font-size: 16px;
            color: #788397;
            letter-spacing: 0;
            transform: translateY(-80px);
        }
    }
</style>

<i18n>
zh-CN:
  noData: 暂无相关内容
  end: 流程结束
  doing: 流转中
  actions:
    urged: 催办
en-US:
  noData: No relevant content
  end: End of process
  doing: In circulation
  actions:
    urged: Urge
</i18n>
